<template>
	<view class="mine-page">
		<!-- 顶部背景区域 -->
		<view class="top-bg"></view>

		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="avatar-wrapper">
				<image src="/static/images/avatar-default.png" class="avatar" mode="widthFix"></image>
				<view class="vip-tag">VIP 3</view>
			</view>

			<view class="user-info">
				<view class="user-name">游戏玩家</view>
				<view class="user-id">ID: 1008611</view>
				<button class="edit-btn">编辑资料</button>
			</view>
		</view>

		<!-- 数据统计卡片 -->
		<view class="stats-card">
			<view class="stat-item">
				<view class="stat-value">128h</view>
				<view class="stat-label">游戏时长</view>
			</view>
			<view class="stat-item">
				<view class="stat-value">4</view>
				<view class="stat-label">服务器数量</view>
			</view>

			<view class="stat-item">
				<view class="stat-value">55</view>
				<view class="stat-label">服务器收藏量</view>
			</view>
		</view>

		<!-- 功能入口区域 -->
		<view class="functions-container">
			<!-- 游戏相关功能 -->
			<view class="function-group">
				<view class="group-title">社交互动</view>

				<view class="function-grid">
					<view class="function-item">
						<view class="function-icon game-icon">
							<uni-icons type="game" size="28"></uni-icons>
						</view>
						<view class="function-name">当前服务器</view>
					</view>

					<view class="function-item">
						<view class="function-icon inventory-icon">
							<uni-icons type="shop" size="28"></uni-icons>
						</view>
						<view class="function-name">我的背包</view>
					</view>

					<view class="function-item">
						<view class="function-icon character-icon">
							<uni-icons type="person" size="28"></uni-icons>
						</view>
						<view class="function-name">物品排行榜</view>
					</view>

					<view class="function-item">
						<view class="function-icon achievement-icon">
							<uni-icons type="trophy" size="28"></uni-icons>
						</view>
						<view class="function-name">活动中心</view>
					</view>
				</view>
			</view>

			<!-- 社交相关功能 -->
			<view class="function-group">
				<view class="group-title">服务器管理</view>

				<view class="function-grid">
					<view class="function-item" @click="serversadd()">
						<view class="function-icon friends-icon">
							<uni-icons type="friends" size="28"></uni-icons>
						</view>
						<view class="function-name">添加服务器</view>
					</view>

					<view class="function-item">
						<view class="function-icon team-icon">
							<uni-icons type="team" size="28"></uni-icons>
						</view>
						<view class="function-name">服务器列表</view>
					</view>

					<view class="function-item">
						<view class="function-icon message-icon">
							<uni-icons type="chat" size="28"></uni-icons>
						</view>
						<view class="function-name">我的收藏</view>
					</view>

					<view class="function-item">
						<view class="function-icon activity-icon">
							<uni-icons type="calendar" size="28"></uni-icons>
						</view>
						<view class="function-name">邮件中心</view>
					</view>
				</view>
			</view>

			<!-- 账户相关功能 -->
			<view class="function-group">
				<view class="group-title">账户设置</view>

				<view class="function-list">
					<view class="list-item">
						<uni-icons type="idcard" size="24" class="list-icon"></uni-icons>
						<view class="list-text">个人资料</view>
						<uni-icons type="right" size="20" class="list-arrow"></uni-icons>
					</view>

					<view class="list-item">
						<uni-icons type="lock" size="24" class="list-icon"></uni-icons>
						<view class="list-text">账号安全</view>
						<uni-icons type="right" size="20" class="list-arrow"></uni-icons>
					</view>

					<view class="list-item">
						<uni-icons type="setting" size="24" class="list-icon"></uni-icons>
						<view class="list-text">系统设置</view>
						<uni-icons type="right" size="20" class="list-arrow"></uni-icons>
					</view>

					<view class="list-item danger">
						<uni-icons type="logout" size="24" class="list-icon"></uni-icons>
						<view class="list-text">退出登录</view>
						<uni-icons type="right" size="20" class="list-arrow"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<view class="version">版本 v1.2.0</view>
			<view class="copyright">© 2023 游戏名称 版权所有</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 仅为UI展示，无实际数据
			};
		},
		onShow() {
			this.loadStorageData();
		},
		methods:{
			//添加服务器
			serversadd(){
				uni.navigateTo({
					url:'/pages/gongneng/addservers/addservers'
				})
			},
			loadStorageData() {
				const userInfo = uni.getStorageSync('userData');
				console.log("本地数据:",userInfo)
			}
		}
	}
</script>

<style scoped>
	/* 基础样式 */
	.mine-page {
		min-height: 100vh;
		background-color: #f5f7fa;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		color: #333;
		padding-bottom: 30rpx;
	}

	/* 顶部背景 */
	.top-bg {
		height: 280rpx;
		background: linear-gradient(135deg, #5b6ef7 0%, #2738c7 100%);
		position: relative;
	}

	.top-bg::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60rpx;
		background: linear-gradient(to bottom, rgba(91, 110, 247, 0.1), transparent);
	}

	/* 用户信息卡片 */
	.user-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: -120rpx 30rpx 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 10;
	}

	.avatar-wrapper {
		position: relative;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 6rpx solid #fff;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	}

	.vip-tag {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		background-color: #ffc107;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
	}

	.user-info {
		margin-left: 30rpx;
		flex: 1;
	}

	.user-name {
		font-size: 38rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 10rpx;
	}

	.user-id {
		font-size: 26rpx;
		color: #888;
		margin-bottom: 20rpx;
	}

	.edit-btn {
		background-color: #5b6ef7;
		color: #fff;
		border: none;
		border-radius: 30rpx;
		padding: 12rpx 30rpx;
		font-size: 26rpx;
		font-weight: 500;
		height: auto;
		line-height: normal;
		width: auto;
	}

	/* 数据统计卡片 */
	.stats-card {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin: 0 30rpx 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		text-align: center;
		padding: 0 10rpx;
	}

	.stat-value {
		font-size: 34rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 8rpx;
		display: block;
	}

	.stat-label {
		font-size: 24rpx;
		color: #888;
	}

	/* 功能区域 */
	.functions-container {
		padding: 0 30rpx;
	}

	.function-group {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.group-title {
		font-size: 30rpx;
		color: #555;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		font-weight: 500;
	}

	/* 网格布局功能区 */
	.function-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.function-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		border-right: 1rpx solid #f5f5f5;
		box-sizing: border-box;
	}

	/* 移除每行最后一个元素的右边框 */
	.function-item:nth-child(4n) {
		border-right: none;
	}

	/* 移除最后一行的下边框 */
	.function-grid .function-item:nth-last-child(-n+4) {
		border-bottom: none;
	}

	.function-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
		color: #fff;
	}

	.game-icon {
		background-color: #4caf50;
	}

	.inventory-icon {
		background-color: #ff9800;
	}

	.character-icon {
		background-color: #2196f3;
	}

	.achievement-icon {
		background-color: #9c27b0;
	}

	.friends-icon {
		background-color: #e91e63;
	}

	.team-icon {
		background-color: #00bcd4;
	}

	.message-icon {
		background-color: #ff5722;
	}

	.activity-icon {
		background-color: #795548;
	}

	.function-name {
		font-size: 26rpx;
		color: #555;
	}

	/* 列表布局功能区 */
	.function-list {
		display: flex;
		flex-direction: column;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 28rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.list-icon {
		color: #5b6ef7;
		margin-right: 30rpx;
	}

	.list-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.list-arrow {
		color: #ddd;
	}

	/* 危险操作样式 */
	.list-item.danger .list-icon,
	.list-item.danger .list-text {
		color: #e53935;
	}

	/* 底部信息 */
	.footer {
		text-align: center;
		padding: 40rpx 0 20rpx;
	}

	.version {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
		display: block;
	}

	.copyright {
		font-size: 22rpx;
		color: #bbb;
	}
</style>